﻿import QtQuick 2.12

Rectangle {
    id: root
    property Component mComponent
    // GroupBox title
    property string text: "Text"

    /*
      * idname        : Item Friendly Name
      * is_debug      : debug switch
      * tag           : log tag
    */
    property string idname    : ""
    property bool is_debug    : false
    property string tag       : "[MyGroupBox]" + idname + ": "

    // config
    width: 300
    height: 300
    border.width: 20
    border.color: is_debug ? "red" : "white"
    radius: 7

    Rectangle {
        width: parent.width - parent.border.width
        height: parent.height - parent.border.width
        border.color: "#C8E6D8" //"#d0d0d0"
        border.width: 1
        radius: parent.radius
        anchors.centerIn: parent

        /* Here is test Component */
        Component {
            id: test_com
            Rectangle {
                width: 50
                height: 50
                color: "pink"
                anchors.centerIn: parent
                Component.onCompleted: {
                    console.log(tag, "test_com is loaded.")
                }
            }
        }

        Rectangle {
            width: parent.width - parent.parent.border.width
            height: parent.height - parent.parent.border.width
            color: is_debug ? "green" : "white"
            anchors.centerIn: parent
            Loader {
                anchors.fill: parent
                sourceComponent: is_debug ? test_com : root.mComponent
            }
            Component.onCompleted: {
                if (is_debug) { console.log(tag, "chid chid border.") }
            }
        }
    }
    Rectangle {
        x: root.border.width
        color: is_debug ? "yellow" : "white"
        width: text_content.contentWidth
        // height: text_content.contentHeight
        height: root.border.width
        radius: 3
        Text {
            // height: parent.height
            id: text_content
            anchors.centerIn: parent
            // font.pixelSize: 11
            font.family: groupBox_font1.name
            color: "#595959"
            font.pointSize: 10
            text: ' ' + root.text + ' '
            Component.onCompleted: {
                if(root.is_debug) {
                    console.log(tag, "text font.size: ", font.pointSize)
                    console.log(tag, "contentHeight: ", contentHeight)
                    console.log(tag, "contentWidth: ", contentWidth)
                }
            }
        }
        Component.onCompleted: {
            if (root.is_debug) {
                console.log(tag, 'text: "', text_content.text, '"')
                console.log(tag, "x:",x," parent.x:",parent.x," root.border.width:",root.border.width)
            }
        }
    }
    Component.onCompleted: {
        if (root.is_debug) {
            console.log(tag, "groupbox x:", x, " y:", y)
        }
    }

    FontLoader {
        id: groupBox_font1
        source: "qrc:/fonts/XinLanYuan-R.ttf"
    }

}
